<template>
  <div
    class="flex flex-wrap justify-center 2xl:justify-start content-start w-full min-h-full gap-2 p-2 rounded bg-tranparent"
  >
  <Card v-for="item in goods" :key="item.id" :good="item"/>
  </div>
</template>

<script lang="ts" setup>
import type { Good } from "@/interface/good"

import Card from '@/components/Card.vue'
import { reactive, ref, onBeforeMount } from "vue"
import { goodList } from "@/api/good"


const goods = ref<Good[]>([])

onBeforeMount(() => {
  getGoodList()
})
const getGoodList = async () => {
  const {
    data: { data },
  } = await goodList()
  goods.value = data
}
</script>

<style>
.ant-input-number{
  display: flex;
  align-items: center;
}
</style>
